<template>
	<view>
		<view class="loading-css" :class="currSys" :style="{'width':cirSize + 'px','height':cirSize+'px'}" v-if="loadType == 1"></view>
		<div class='loading' v-if="loadType == 2">
			<div class="loader"></div>
		</div>
	</view>
</template>

<script>
	export default {
		props:{
			cirSize:{
				type:Number,
				default:20
			},
			loadType:{
				type:Number,
				default:1
			},
			currSys:{
				type:String,
				default:'common'
			}
		}
	}
</script>

<style lang='scss' scoped>
	.loading-css {
	  box-sizing: border-box;
	  display: inline-block;
	  border: 2px solid #f3f3f3;
	  border-top: 2px solid $pss-color-primary_1;
	  border-radius: 50%;
	  /* 动画旋转效果 */
	  animation: rotate-360 1s infinite linear;
	}
	@keyframes rotate-360 {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
	.loading {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    max-height: 700px;
	    min-height: 150px;
	}
	.loader {
	    position: absolute;
	    top: calc(50% - 1.25em);
	    left: calc(50% - 1.25em);
	    width: 2.5em;
	    height: 2.5em;
	    transform: rotate(165deg);
	
	    &::before, &::after {
	        content: '';
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        display: block;
	        width: 0.5em;
	        height: 0.5em;
	        border-radius: 0.25em;
	        transform: translate(-50%, -50%);
	    }
	
	    &::before {
	        animation: before-ani 2s infinite;
	    }
	
	    &::after {
	        animation: after-ani 2s infinite;
	    }
	}
	
	@keyframes before-ani {
		    0% {
		        width: 0.5em;
		        box-shadow: 1em -0.5em rgba(251, 85, 85, .75), -1em 0.5em rgba(75, 136, 243, .75);
		    }
		    35% {
		        width: 2.5em;
		        box-shadow: 0 -0.5em rgba(251, 85, 85, .75), 0 0.5em rgba(75, 136, 243, .75);
		    }
		    70% {
		        width: 0.5em;
		        box-shadow: -1em -0.5em rgba(251, 85, 85, .75), 1em 0.5em rgba(75, 136, 243, .75);
		    }
		    100% {
		        box-shadow: 1em -0.5em rgba(251, 85, 85, .75), -1em 0.5em rgba(75, 136, 243, .75);
		    }
		}
		@keyframes after-ani {
		    0% {
		        height: 0.5em;
		        box-shadow: 0.5em 1em rgba(0, 239, 239, .75), -0.5em -1em rgba(255, 159, 64, .75);
		    }
		    35% {
		        height: 2.5em;
		        box-shadow: 0.5em 0 rgba(0, 239, 239, .75), -0.5em 0 rgba(255, 159, 64, .75);
		    }
		    70% {
		        height: 0.5em;
		        box-shadow: 0.5em -1em rgba(0, 239, 239, .75), -0.5em 1em rgba(255, 159, 64, .75);
		    }
		    100% {
		        box-shadow: 0.5em 1em rgba(0, 239, 239, .75), -0.5em -1em rgba(255, 159, 64, .75);
		    }
		}
</style>